<template>
  <div class="container">
    <!-- 套餐详情信息 -->
    <div class="package-info">
      <!-- 套餐图片 -->
      <div class="package-img">
        <img
          src="../../../../static/img/recommed/hot_g.png"
          v-if="packageInfo.recommendList[0].sex === '女'"
          alt=""
        />
        <img
          src="../../../../static/img/recommed/hot_m.png"
          v-else-if="packageInfo.recommendList[0].sex === '男'"
          alt=""
        />
        <img
          src="../../../../static/img/recommed/hot_g.png"
          v-else-if="packageInfo.recommendList[0].sex === '通用'"
          alt=""
        />
      </div>
      <div class="package-info-detail">
        <div class="package-name">{{ packageInfo.recommendList[0].name }}</div>
        <div class="package-tag">{{ packageInfo.recommendList[0].tag }}</div>
        <div class="package-line">
          <div class="package-reserve">
            {{ packageInfo.recommendList[0].reserveNum }}人预约
          </div>
          <div class="package-price">
            ￥{{ packageInfo.recommendList[0].cost }}
          </div>
        </div>
      </div>
    </div>

    <div class="package-project">
      <!-- 自选项目 -->
      <!-- <div class="package-project-title">自选项目</div>
      <div class="package-project-content">
      </div> -->

      <!-- 套餐项目 -->
      <div class="package-project-pack-title">套餐项目</div>

      <div class="package-project-title">一般项目</div>
      <div class="package-project-content">
        <div class="package-project-item-title">
          »&nbsp;{{ packageProject.normal.title }}
        </div>
        <div class="package-project-item-describe">
          {{ packageProject.normal.describe }}
        </div>
      </div>
      <!-- 核验项目 -->
      <div class="package-project-title">核验项目</div>
      <div class="package-project-content">
        <div class="package-project-item-normal">
          {{ packageProject.check.title }}
        </div>
        <div
          class="package-project-item-line"
          v-for="(item, index) in packageProject.check.projectList"
          :key="index"
        >
          <div class="package-project-item-line-title">
            »&nbsp;{{ item.title }}
          </div>
          <div class="package-project-item-line-describe">
            {{ item.describe }}
          </div>
        </div>
      </div>
    </div>

    <!-- 底部栏 -->
    <div class="package-bottom">
      <div style="display: flex; justify-content: space-between">
        <!-- 总金额 -->
        <div class="package-total">
          <div class="package-total-cost">
            ￥{{ packageInfo.recommendList[0].cost }}
          </div>
          <div class="package-total-num">共{{ total }}项</div>
        </div>
        <div class="package-addition">
          <div class="package-addition-title" @click="addition">+ 自主加项</div>
          <div class="package-next" @click="next">下一步</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "appointment",
  data() {
    return {
      // 总项数
      total: 0,
      // 套餐详情信息
      packageInfo: {
        recommendList: [
          {
            name: "惠民健康体检-女",
            tag: ["仅限女性"],
            sex: "女",
            cost: "323.2",
            reserveNum: 1,
          },
          // {
          //   name: "惠民健康体检-男",
          //   tag: ["仅限男性"],
          //   sex: "男",
          //   cost: "323.2",
          //   reserveNum: 1,
          // },
          // {
          //   name: "惠民健康体检-通用",
          //   tag: ["通用"],
          //   sex: "通用",
          //   cost: "323.2",
          //   reserveNum: 1,
          // },
        ],
      },
      // 套餐项目信息
      packageProject: {
        name: "惠民健康体检-男",
        cost: "323.2",
        // 一般检查
        normal: {
          title: "一般检查",
          // 描述
          describe: "通过仪器测量评估体重是否超重、肥胖;血压异常情况",
        },

        // 核验项目
        check: {
          title: "核验项目",
          // 描述
          projectList: [
            {
              title: "血清尿酸测定",
              describe:
                "评定人空腹状态下血糖代谢是否正常，餐前血糖检查，判断糖尿病病情和控制程度的重要指标，是诊断血糖代谢素乱的最常用和最重要指标。",
            },
            {
              title: "葡萄糖测定",
              describe:
                "评定人空腹状态下血糖代谢是否正常，餐前血糖检查，判断糖尿病病情和控制程度的重要指标，是诊断血糖代谢素乱的最常用和最重要指标。",
            },
            {
              title: "肝功七项",
              describe:
                "丙氨酸氨县转移酶、天门冬氨酸氨县转移酶、谷草/谷丙,总胆红素、直接胆红素、间接胆红素。评估肝硬化、肿瘤结核、炎症、酗酒、药物等引起的肝炎、肝硬化、肝功能变化等。",
            },
            {
              title: "血脂四项",
              describe:
                "检查血洁总胆固醇、目油三酯、高密度脂蛋白和低密应脂蛋白，用于高胎血症的诊断。对早期预防心脑血管疾病有指导",
            },
          ],
        },
      },
    };
  },
  methods: {
    addition() {
      wx.navigateTo({
        url: "/pages/phyExamApp/singleApp/addition/index",
      });
    },
    next() {
      wx.navigateTo({
        url: "/pages/phyExamApp/singleApp/attentionMatter/index",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  // position: relative;
}
.package-info {
  // //border: 1px solid red;
  margin: 4px 8px;
  padding: 2px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  .package-img {
    width: 100px;
    height: 70px;
    padding: 10px;
    // //border: 1px solid red;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .package-info-detail {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    // //border: 1px solid red;
    .package-name {
      font-size: 14px;
      color: #484b4a;
    }
    .package-tag {
      font-size: 12px;
      // border: 1px solid #ebeef5;
      margin-bottom: 6px;
      width: fit-content;
      padding: 2px;
      // background-color: rgb(245, 245, 245);
      border-radius: 4px;
      color: #878588;
      border: 1px solid #ebeef5;
    }
    .package-line {
      display: flex;
      justify-content: space-between;
      .package-reserve {
        font-size: 12px;
        color: #868784;
      }
      .package-price {
        font-size: 14px;
        margin-right: 10px;
        color: #484b4d;
      }
    }
  }
}
.package-project {
  //border: 1px solid red;
  height: 400px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-top: 10px;
  padding: 10px;

  .package-project-pack-title {
    font-size: 16px;
    // font-weight: bold;
    color: #4b4856;
    width: fit-content;
    //border: 1px solid red;
  }
  .package-project-title {
    font-size: 14px;
    // font-weight: bold;
    color: #4b4856;
    width: fit-content;
    // border: 1px solid red;
    padding: 4px 0;
  }
  .package-project-content {
    //border: 1px solid red;

    .package-project-item-normal {
      // border: 1px solid red;
      font-size: 14px;
      font-weight: bold;
      width: fit-content;
      height: fit-content;
      margin: 10px 0;
      color: #4b4b48;
    }
    .package-project-item-title {
      font-size: 14px;
      color: #64655d;
      font-weight: bold;
      // border: 1px solid red;
      padding: 4px 0;
    }
    .package-project-item-describe {
      font-size: 14px;
      color: #919ea5;
      // margin-left: 24px;
      // border: 1px solid red;
      padding: 4px 0;
      text-indent: 14px;
    }
    .package-project-item-line {
      //border: 1px solid red;
      .package-project-item-line-title {
        font-size: 14px;
        color: #64655d;
        font-weight: bold;
        padding: 4px 0;
      }
      .package-project-item-line-describe {
        text-indent: 14px;
        // border: 1px solid red;
        padding: 4px 0;
        line-height: 24px;

        // margin-left: 24px;
        font-size: 14px;
        color: #919ea5;
      }
    }
  }
}
.package-bottom {
  position: absolute;
  bottom: 2%;
  width: 100%;
  // height: 100px;
  // border: 10px solid red;
  background-color: #fff;
  .package-total {
    // border: 1px solid red;
    padding: 10px;
    .package-total-cost {
      font-size: 14px;
      color: #f54b46;
      font-weight: 600;
    }
    .package-total-num {
      font-size: 12px;
      color: #484b4a;
    }
  }
  .package-addition {
    // border: 1px solid red;
    display: flex;
    padding: 10px;
    .package-addition-title {
      color: #4e98da;
      padding: 0 10px;
      // border: 1px solid red;
      font-size: 14px;
      line-height: 36px;
    }
    .package-next {
      background: #65aceb;
      color: #fff;
      padding: 4px 30px;
      // height: fit-content;
      line-height: 28px;
      font-size: 14px;
      // border: 1px solid red;
      border-radius: 4px;
      margin-left: 10px;
    }
  }
}
</style>